<template>
  <div id="mailList">
    <nav-header>
      <template slot="menuBefore">
        <li>
          <router-link to="/resources/resource/teaching-resources" tag="a"
            >教学资源</router-link
          >
        </li>
        <li class="gap">&gt;</li>
      </template>
      <li>资源编辑</li>
    </nav-header>
    <!--  -->
    <div class="u_resource">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="资源名称" prop="name">
          <el-input
            v-model.trim="ruleForm.name"
            placeholder="最多可输入50个字"
            v-cloak
          ></el-input>
        </el-form-item>
        <el-form-item
          label-width="0"
          v-if="!$store.state.platformInformation"
          class="remove-margin-in-item"
        >
          <el-col :span="8">
            <el-form-item label="学段" prop="study_section_id">
              <el-select
                v-model="ruleForm.study_section_id"
                filterable
                @change="relateChange($event, 'study_section')"
                placeholder="请选择学段"
                v-cloak
              >
                <el-option
                  v-for="(item, index) in orgLevel2"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年级" prop="grade_id">
              <el-select
                v-model="ruleForm.grade_id"
                filterable
                @change="relateChange($event, 'grade')"
                placeholder="请选择年级"
                v-cloak
              >
                <el-option
                  v-for="(item, index) in orgLevel3"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="科目" prop="subject_id">
              <el-select
                v-model="ruleForm.subject_id"
                filterable
                @change="relateChange($event, 'subject')"
                placeholder="请选择科目"
                v-cloak
              >
                <el-option
                  v-for="(item, index) in orgSubject"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          label-width="0"
          v-if="!$store.state.platformInformation"
          class="remove-margin-in-item"
        >
          <el-col :span="8">
            <el-form-item label="版本" prop="version_id">
              <el-select
                v-model="ruleForm.version_id"
                filterable
                @change="relateChange($event, 'version')"
                placeholder="请选择版本"
                v-cloak
              >
                <el-option
                  v-for="(item, index) in orgVersion"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="教材" prop="material_id">
              <el-select
                v-model="ruleForm.material_id"
                filterable
                @change="relateChange($event, 'material')"
                placeholder="请选择教材"
                v-cloak
              >
                <el-option
                  v-for="(item, index) in orgMaterial"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="章" prop="list_1_id">
              <el-select
                v-model="ruleForm.list_1_id"
                filterable
                @change="relateChange($event, 'list_1')"
                placeholder="请选择章"
                v-cloak
              >
                <el-option
                  v-for="(item, index) in orgList1"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label-width="0" class="remove-margin-in-item">
          <el-col v-if="!$store.state.platformInformation" :span="8">
            <el-form-item label="节" prop="list_2_id">
              <el-select
                v-model="ruleForm.list_2_id"
                placeholder="请选择节"
                filterable
                v-cloak
              >
                <el-option
                  v-for="(item, index) in orgList2"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              v-if="$store.state.checkLevel"
              label="类别"
              prop="catename"
            >
              <el-select
                v-model="ruleForm.cate_name"
                @change="getVal"
                filterable
                placeholder="选择分类"
              >
                <el-option
                  v-for="item of resoureKindData"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="简介" prop="profile">
					<el-input type="textarea" v-model="ruleForm.profile"
					:rows="2" placeholder="不超200字"  v-cloak>
					</el-input>
				</el-form-item> -->
        <!-- <el-form-item label="权限" prop="authority">
					<el-radio-group v-model="ruleForm.authority"  v-cloak>
						<el-radio :label="1">公开</el-radio>
						<el-radio :label="0">不公开</el-radio>
					</el-radio-group>
				</el-form-item> -->

        <el-form-item label="允许下载" prop="is_download">
          <el-radio-group v-model="ruleForm.is_download" v-cloak>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="r_submitBox">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click.prevent="submitForm('ruleForm')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testdata:"",
      resoureKindData: [],
      orgLevel2: [],
      orgLevel3: [],
      orgSubject: [],
      orgVersion: [],
      orgMaterial: [],
      orgList1: [],
      orgList2: [],
      id: this.$route.params.id,
      orgLevel2Param: {
        //获取学段参数
        level: 2,
        pid: null,
        direction: "balance",
      },
      orgLevel3Param: {
        //获取年纪参数
        level: 3,
        pid: null,
        direction: "balance",
      },
      subjectParam: {
        //获取科目,版本，参数
        type: 2,
        org_id: null,
        status: 1,
      },
      versionParam: {
        //获取科目,版本，参数
        type: 2,
        org_id: null,
        sub_id: null,
        status: 1,
      },
      materialParam: {
        //获取科目,版本，参数
        org_id: null,
        sub_id: null,
        ver_id: null,
        status: 1,
      },
      listParam1: {
        pid: 0,
        material_id: null,
        level: 1,
      },
      listParam2: {
        pid: 0,
        material_id: null,
        level: 2,
      },
      ruleForm: {
        cate_id: "",
        cate_name: "",
        name: "", //资源名称
        study_section_id: null, //学段
        grade_id: null, //年级
        subject_id: null, //科目
        version_id: null, //版本
        material_id: null, //教材
        list_1_id: null, // 章id
        list_2_id: null, // 节id
        authority: 1, //权限
        is_download: "", //允许下载
        profile: "", //简介
        format_pdf: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入资源名称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符" },
        ],
        catename: [{ message: "请输入资源名称", trigger: "blur" }],
        profile: [{ min: 3, max: 200, message: "长度在 3 到 200 个字符" }],
        study_section_id: [
          { required: true, message: "请选择学段", trigger: "change" },
        ],
        grade_id: [
          { required: true, message: "请选择年级", trigger: "change" },
        ],
        subject_id: [
          { required: true, message: "请选择年级", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.resourceMsg();
    this.getSourceKind();
  },
  watch: {
    // orgSubject: {
    //   handler(a, b) {
    //     console.log(a,b)
    //     a.forEach(item =>{
    //       if(item.id != this.ruleForm.subject_id) {
    //         this.ruleForm.subject_id = ''
    //       }
    //     })
    //   },
    //   immediate: true
    // }
  },
  computed: {},
  methods: {
    getVal(val) {
      // 获取当前选中项，
      this.ruleForm.cate_id = val; // 把获取到的分类id 给 添加视频的视频分类id字段
    },
    /**获取资源类别 */
    getSourceKind() {
      let success = (res) => {
        this.resoureKindData = res.data;
        console.log(res.data, 333);
      };
      this.$ajax.get("api/resource/resource_cate", { func: { success } });
    },
    //数据请求
    resourceMsg() {
      let success = (res) => {
        // console.log(res.data, 100);
        this.testdata = res.data
        console.log(this.testdata,'ppppppppppppppoooooooooooooo')
        let data = res.data[0];
        this.ruleForm = data;
        this.ruleForm.study_section_id =
          parseInt(data.study_section_id) === 0 ? null : data.study_section_id;
        this.ruleForm.grade_id =
          parseInt(data.grade_id) === 0 ? null : data.grade_id;
        this.ruleForm.subject_id =
          parseInt(data.subject_id) === 0 ? null : data.subject_id;
        this.ruleForm.version_id =
          parseInt(data.version_id) === 0 ? null : data.version_id;
        this.ruleForm.material_id =
          parseInt(data.material_id) === 0 ? null : data.material_id;
        this.ruleForm.list_1_id =
          parseInt(data.list_1_id) === 0 ? null : data.list_1_id;
        this.ruleForm.list_2_id =
          parseInt(data.list_2_id) === 0 ? null : data.list_2_id;
        this.ruleForm.cate_id = data.cate_id;
        this.ruleForm.cate_name = data.cate_name;

        this.getOrgLevel2();

        this.orgLevel3Param.pid = data.study_section_id;
        this.getOrgLevel3();

        this.subjectParam.org_id = data.grade_id;
        this.getSubject();

        if (parseInt(data.subject_id) > 0) {
          this.versionParam.org_id = data.grade_id;
          this.versionParam.sub_id = data.subject_id;
          this.getVersion();
        }

        if (parseInt(data.version_id) > 0) {
          this.materialParam.org_id = data.grade_id;
          this.materialParam.sub_id = data.subject_id;
          this.materialParam.ver_id = data.version_id;
          this.getMaterial();
        }

        if (parseInt(data.material_id) > 0) {
          this.listParam1.material_id = data.material_id;
          this.getList1();

					if (parseInt(data.list_1_id) > 0) {
						this.listParam2.material_id = data.material_id;
						this.listParam2.pid = data.list_1_id;
						this.getList2();
					}
				}
      };
      this.$ajax.get("api/resource/resource", {
        params: { id: this.id },
        func: { success: success },
      });
    },
    //获取学段
    getOrgLevel2() {
      if (this.$store.state.checkLevel) {
        this.orgLevel2Param.app_code = sessionStorage.getItem(
          "CheckSchoolAppCode"
        );
      }
      let success = (data) => {
        this.orgLevel2 = data.data;
      };
      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/network/get_platform_org", {
          params: this.orgLevel2Param,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: this.orgLevel2Param,
          func: { success: success },
        });
      }
    },
    //获取年级
    getOrgLevel3() {
      let success = (data) => {
        this.orgLevel3 = data.data;
      };
      this.$ajax.get("api/org/org", {
        params: this.orgLevel3Param,
        func: { success: success },
      });
    },
    //获取科目
    getSubject() {
      let success = (data) => {
        this.orgSubject = data.data;
      };
      this.$ajax.get("api/cate/subject", {
        params: this.subjectParam,
        func: { success: success },
      });
    },
    //获取版本
    getVersion() {
      let success = (data) => {
        this.orgVersion = data.data;
      };
      this.$ajax.get("api/cate/version", {
        params: this.versionParam,
        func: { success: success },
      });
    },
    //获取教材
    getMaterial() {
      this.materialParam.sub_id = this.testdata[0].subject_id
      this.materialParam.org_id = this.testdata[0].grade_id
      let success = (data) => {
        this.orgMaterial = data.data;
      };
      this.$ajax.get("api/cate/material", {
        params: this.materialParam,
        func: { success: success },
      });
    },
    //获取章
    getList1() {
      let success = (data) => {
        this.orgList1 = data.data;
      };
      this.$ajax.get("api/cate/cate_list", {
        params: this.listParam1,
        func: { success: success },
      });
    },
    //获取节
    getList2() {
      let success = (data) => {
        this.orgList2 = data.data;
      };
      this.$ajax.get("api/cate/cate_list", {
        params: this.listParam2,
        func: { success: success },
      });
    },
    relateChange(newVal, type) {
      switch (type) {
        case "study_section":
          this.ruleForm.grade_id = null;
          this.ruleForm.subject_id = null;
          this.ruleForm.version_id = null;
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgLevel3 = [];
          this.orgSubject = [];
          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.orgLevel3Param.pid = newVal;
          this.getOrgLevel3();
          break;
        case "grade":
          this.ruleForm.subject_id = null;
          this.ruleForm.version_id = null;
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgSubject = [];
          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.subjectParam.org_id = newVal;
          this.getSubject();

          this.versionParam.org_id = newVal;

          this.materialParam.org_id = newVal;
          break;
        case "subject":
          this.ruleForm.version_id = null;
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.versionParam.sub_id = newVal;
          this.getVersion();

          this.materialParam.sub_id = newVal;
          break;
        case "version":
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.materialParam.ver_id = newVal;
          this.getMaterial();
          break;
        case "material":
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgList1 = [];
          this.orgList2 = [];

          this.listParam1.material_id = newVal;
          this.listParam2.material_id = newVal;
          this.getList1();
          break;
        case "list_1":
          this.ruleForm.list_2_id = null;

          this.orgList2 = [];

          this.listParam2.pid = newVal;
          this.getList2();
          break;
        default:
          break;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let success = (res) => {
            let data = res.data;
            this.$message.success(res.msg);
            this.$router.push("/resources/resource/teaching-resources");
          };
          let params = {
            cate_id: this.ruleForm.cate_id,
            id: this.id,
            name: this.ruleForm.name,
            study_section_id: this.ruleForm.study_section_id, //学段
            grade_id: this.ruleForm.grade_id, //年级
            subject_id: this.ruleForm.subject_id, //科目
            version_id: this.ruleForm.version_id, //版本
            material_id: this.ruleForm.material_id, //教材
            list_1_id: this.ruleForm.list_1_id, // 章id
            list_2_id: this.ruleForm.list_2_id, // 节id
            // authority:  this.ruleForm.authority, //权限
            is_download: this.ruleForm.is_download, //允许下载
            profile: this.ruleForm.profile, //简介
          };

          this.$ajax.put("api/resource/vue_resource", params, {
            func: { success: success },
          });
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
#mailList {
  .el-form {
    max-width: 800px;
    margin-top: 30px;
  }

  .remove-margin-in-item {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>